<template>
  <div class="dialog_content">
    <el-dialog class="m_dialog" title="" :visible.sync="dialogVisible" width="800" append-to-body
      :close-on-click-modal="false">
      <div class="content">
        <custom-form ref="planeForm" :formModel="formModel" :formItemConfig="formItemConfig" :formRules="formRules"
          label-width="120px" label-position="left" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="btn_cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm()" class="btn_primary">确 定</el-button>
        <!-- <el-button  class="btn_cancel">取 消</el-button>
        <el-button type="primary"  class="btn_primary">确 定</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addProjectPointPic } from "@/api";
export default {
  props: ["value", "name"],
  dicts: ["projectpointpic_type"],
  data() {
    return {
      formModel: {
        picName: undefined,
        picType: undefined,
        picTypeName: undefined,
        picUrl: undefined,
        remark: undefined,
        projectPointId: undefined,
        projectPointName: this.name,
        sort: undefined,
      },
      formItemConfig: [
        {
          label: "所属项目点",
          prop: "projectPointName",
          span: 24,
          clearable: true,
          disabled: true
        },
        {
          label: "图片名称",
          prop: "picName",
          span: 24,
          clearable: true,
        },
        {
          label: "图片类型",
          prop: "picTypeName",
          span: 24,
          component: "BaseSelect",
          disabled: true,
          clearable: true,
        },
        {
          label: "排序",
          prop: "sort",
          span: 24,
          min: 0,
          component: "el-input-number",
          clearable: true,
        },
        {
          label: "上传图片",
          prop: "picUrl",
          span: 24,
          component: "BaseUpload",
          clearable: true,
          onChange: (val, e) => {
            console.log(val, e, 'dialog change')
            this.formModel.picUrl = val
          },
        },
      ],
      // 表单验证
      formRules: {
        picName: {
          required: true,
          message: "图片名称不能为空",
          trigger: "blur",
        },
        sort: {
          required: true,
          message: "排序不能为空",
          trigger: "blur",
        },
        picType: {
          required: true,
          message: "下拉框值不能为空",
          trigger: "change",
        },
        picUrl: {
          required: true,
          message: "上传图片不能为空",
          trigger: "change",
        },
      },
      // 图片添加弹框
      dialogVisible: false,
      imageType: undefined,

    };
  },
  computed: {},
  watch: {
    imageType: function (val) {
      this.imageType = val
      this.getImageType()
    }
  },
  methods: {

    planeImgChange(url) {
      this.formModel.picUrl = url
    },
    show(point, type, name) {
      console.log(name)
      const title = type == 1 ? "平面图" : "实景图";
      this.imageType = type
      this.dialogVisible = true;
      this.formModel.projectPointId = point
      this.formModel.picType = type
    },
    Lowercancel() {
      this.$emit("Lowercancel");
    },
    // 绚烂图片列表
    initImgList() {
      this.$emit("initImgList", this.formModel.picType);
    },
    // 提交
    submitForm() {
      console.log(this.formModel)
      if (typeof this.formModel.picUrl !== 'string') {
        this.formModel.picUrl = this.formModel.picUrl.response.data.url
      }
      addProjectPointPic(this.formModel).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.formModel = {
            picName: undefined,
            picType: undefined,
            picTypeName: undefined,
            picUrl: undefined,
            remark: undefined,
            projectPointId: undefined,
            projectPointName: this.name,
            sort: undefined,
          }
          this.dialogVisible = false;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
        this.initImgList()
      })
    },
    // 初始获得图片类型
    getImageType() {
      let imageTypeArr = this.dict.type.projectpointpic_type
      for (const item of imageTypeArr) {
        if (item.value == this.imageType) {
          this.formModel.picTypeName = item.label
          this.formModel.picType = item.value
        }
      }
    },
  },
  created() {
    this.getImageType()
    console.log(this.name, 'name')
    // this.formModel.projectPointName = this.projectPointInfo.projectPointName;
    // this.formModel.projectPointId = this.projectPointInfo.projectPointId;
  },
  mounted() { },
  components: {},
};
</script>

<style lang="less" scoped></style>
